import { Card, Col, Row } from 'antd'
import React from 'react'
import './index.css'
import HomeTable from './components/HomeTable/index.js'
import HomeOrder from './components/HomeOrder/index.js'
import HomeEachart from './components/HomEchart/index.js'

export default function Home() {
  const userAvatar = require('../../static/avatar.jpg')
  return (
    <Row className='home' gutter={16}>
      {/* 左侧 */}
      <Col span={8}>
        {/* 个人信息 */}
        <Card hoverable className='left-card'>
          <div className='card-top'>
            <img src={userAvatar} alt='头像' />
            <div className='card-info'>
              <h2 className='card-name'>Admin</h2>
              <span className='card-role'>超级管理员</span>
            </div>
          </div>
          <div className='card-bottom'>
            <div className='card-time'>
              <span className='card-time-word'>上次登陆时间：</span>
              <span>2021-01-01 12:34:56</span>
            </div>
            <div className='card-time'>
              <span className='card-time-word'>上次登陆地点：</span>
              <span>1608室</span>
            </div>
          </div>
        </Card>
        {/* 表格 */}
        <HomeTable></HomeTable>
      </Col>
      {/* 右侧 */}
      <Col span={16}>
        <HomeOrder></HomeOrder>
        <HomeEachart></HomeEachart>
      </Col>
    </Row>
  )
}
